const dataPickerList = [
  { name: '防撞护栏钢管扶手油漆(1次/季)', value: 18.14 },
  { name: '路铭牌保洁(1次/月)', value: 49.14 },
  { name: '清理进水口(6次/年)', value: 68.89 },
  { name: '疏通桥面泄水孔(1次/月)', value: 99.99 },
  { name: '路铭牌保洁(1次/月)', value: 32.14 },
  { name: '清理进水口(6次/年)', value: 25.14 }
]
const myColor = ["#51FC4E", "#4C5FF5", "#FFE660", "#79F1FF"].reverse();
const xData = dataPickerList.map((item) => item.name);
const yData = dataPickerList.map((item) => item.value);
const max = Math.ceil(Math.max(...yData) * 1);
const maxData = dataPickerList.map(() => max);
option = {
  backgroundColor: '#0F1F45',
  grid: {
     left: "25%",  // 增加左侧空间
     right: "2%",
     top: "5%",
     bottom: "3%",
     containLabel: true,
  },
  xAxis: [
     {
        show: false,
     },
     {
        show: false,
     },
  ],
  yAxis: [
     {
        show: false,
        inverse: true,
        data: yData,
     },
     {
        show: true,
        inverse: true,
        data: yData,
        position: "right",
        axisLabel: {
           lineHeight: 0,
           verticalAlign: "bottom",
           fontSize: 13,
           color: "#fff",
           formatter: "{value}%",
        },
        axisLine: {
           show: false,
        },
        splitLine: {
           show: false,
        },
        axisTick: {
           show: false,
        },
     },
  ],
  series: [
     {
        name: "进度",
        show: true,
        type: "bar",
        barGap: "-100%",
        xAxisIndex: 1,
        barWidth: 10,
        itemStyle: {
           borderRadius: 0,
           color: (params) => {
              return {
                 type: "linear",
                 colorStops: [
                    {
                       offset: 0,
                       color: "#0F1F45",
                    },
                    {
                       offset: 1,
                       color: "#FDEA1A",
                    },
                 ],
              };
           },
        },
        label: {
           show: false,
        },
        // max: 0,
        labelLine: {
           show: false,
        },
        z: 2,
        data: yData,
        animationDelay: 1000,
        animationDuration: 1000
     },
     {
        name: "外圆",
        type: "scatter",
        emphasis: {
           scale: false,
        },
        xAxisIndex: 1,
        symbol: "rect",
        symbolSize: [3, 16],// 进度条白点
        shadowBlur: 5,
        itemStyle: {
           color: '#fff',
           shadowColor: "rgba(255, 255, 255, 0.5)",
           shadowBlur: 5,
           shadowColor: 'rgba(255, 255, 255, 0.8)', // 半透明白色阴影
           shadowOffsetX: 1,  // 水平偏移量
           shadowOffsetY: 1,  // 垂直偏移量
           borderWidth: 10,
           opacity: 1,
        },
        z: 2,
        data: yData,
        animationDelay: 1500,
        animationDuration: 1000
     },
     {
        name: "年份",
        z: 1,
        show: true,
        type: "bar",
        xAxisIndex: 1,
        barGap: "-100%",
        barWidth: 10,
        itemStyle: {
           borderRadius: 0,
           color: "#185F87",
        },
        label: {
           show: true,
           verticalAlign: "middle",
           position: ['-35%', 0], // 关键修改点：X轴负向偏移
           align: 'left',
           fontSize: 14,
           color: "#fff",
           formatter: function (data) {
              return xData[data.dataIndex];
           },
        },
        data: maxData,
     },
  ],
};
